<template>
	<view
		:class="[primarySize()]">
		<navigator url="/pages/company/mine_info" class="chat_btn pr pr30" hover-class="none">
			<image src="/static/public/icon16.png"></image>
		</navigator>
		<view class="plr10 flex-box pr">
			<navigator hover-class="none" url="/pages/company/mine_info">
			<image :src="summary.avatar" mode="aspectFill" class="user_img"></image>
			</navigator>
			<view class="flex-grow-1 plr30">
				<view class="m-ellipsis fwb fs48 colf lh66">{{summary.nickname}}</view>
				<view class="mt15 fs26 colf lh36">{{summary.company_name}}</view>
			</view>

			<view class="switch_nav flex-box flex-center" @click="changeRole()">
				<image :src="iconPath('icon_switch.png')" mode="aspectFill"></image>
				<view class="pl5">切换身份</view>
			</view>
		</view>
		<!-- 企业端 -->
		<view class="mt35 flex-box colf">
			<view class="flex-grow-1 tc" @click="onJump('/pages/company/position_management',1)">
				<view class="fs48 fwb lh58">
					<text>{{summary.job_count || 0}}</text>
				</view>
				<view class="mt5 fs24 lh34">发布管理</view>
			</view>
			<view class="flex-grow-1 tc" @click="bindChatMessage()">
				<view class="fs48 fwb lh58">
					<text :class="{dot:summary.message_count>0}">{{summary.message_count||0}}</text>
				</view>
				<view class="mt5 fs24 lh34">消息中心</view>
			</view>
			<view class="flex-grow-1 tc" @click="onJump('/pages/company/my_address',1)">
				<view class="fs48 fwb lh58">
					<text>{{summary.address_num||0}}</text>
				</view>
				<view class="mt5 fs24 lh34">地址管理</view>
			</view>
		</view>

		<!-- 企业端 -->
		<view class="mid_box flex-box">

			<view @click="onJump('/pages/company/talent_referrals',1)" class="flex-grow-1 part_item">
				<view>
					<image src="@/static/public/icon_profile5.png" mode="aspectFit"></image>
					<view class="red_cir" v-if="summary.recommend_resumes_count>0">
						{{summary.recommend_resumes_count}}
					</view>
				</view>
				<view>人才推荐</view>
			</view>
			<view @click="onJump('/pages/company/resume_application',1)" class="flex-grow-1 part_item">
				<view>
					<image src="@/static/public/icon_profile6.png" mode="aspectFit"></image>
					<view class="red_cir" v-if="summary.apply_count>0">{{summary.apply_count}}</view>
				</view>
				<view>应聘简历</view>
			</view>
			<navigator hover-class="none" url="/pages/public/invitation" open-type="switchTab"
				class="flex-grow-1 part_item">
				<view>
					<image src="@/static/public/icon_profile1.png" mode="aspectFit"></image>
					<view class="red_cir" v-if="summary.interview_count>0">{{summary.interview_count}}</view>
				</view>
				<view>面试邀请</view>
			</navigator>
			<view @click="onJump('/pages/company/taocan',1)" class="flex-grow-1 part_item">
				<view>
					<image src="@/static/public/icon_profile7.png" mode="aspectFit"></image>

				</view>
				<view>我的套餐</view>
			</view>
			
		</view>
		<!-- 企业端进度 -->
		<view class="box1 flex-box" @click="onJump('/pages/company/improve_corporate_information',1)">
			<view class="mine_img">
				<image :src="iconPath('icon_company.png')" mode="aspectFill"></image>
			</view>
			<view class="flex-grow-1 pl20">
				<view class="fs32 fwb col3">我的企业</view>
				<view class="mt10 fs24 col6">完善信息可提高知名度</view>
			</view>
			<template v-if="show">
				<niceui-progress type="circle" :percentage="summary.info_complete" ref="circle2" :color="primaryColor()"
					:width="50" :strokeWidth="3.5" strokeLinecap="butt" :textColor="primaryColor()" :textSize="15"
					:text="'完成率'"></niceui-progress>
			</template>
			<template v-else>
				<niceui-progress type="circle" :percentage="summary.info_complete" ref="circle2" :color="primaryColor()"
					:width="50" :strokeWidth="3.5" strokeLinecap="butt" :textColor="primaryColor()" :textSize="15"
					:text="'完成率'"></niceui-progress>
			</template>
		</view>

		<!-- 企业端 -->
		<view class="box">
			
			<view class="flex-box info_item" @click="onJump('/pages/user/my_view',1)">
				<image src="@/static/public/icon_myview.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">我看过谁</view>
				<image src="@/static/public/arrow_right1.png" mode="aspectFill" class="ico22 ml20"></image>
			</view>
			<view class="flex-box info_item" @click="onJump('/pages/company/view_my',1)">
				<image src="@/static/public/icon_whoview.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">谁看过我</view>
				<image src="@/static/public/arrow_right1.png" mode="aspectFill" class="ico22 ml20"></image>
			</view>
			<view class="flex-box info_item" @click="onJump('/pages/user/my_fav',1)">
				<image src="@/static/public/star.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">我的收藏</view>

				<image src="@/static/public/arrow_right1.png" mode="aspectFill" class="ico22 ml20"></image>
			</view>
			<view class="flex-box info_item" @click="onJump('/pages/user/evaluate_list',1)">
				<image src="@/static/public/icon_white.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">我的评论</view>

				<image src="@/static/public/arrow_right1.png" mode="aspectFill" class="ico22 ml20"></image>
			</view>
			<view class="flex-box info_item" @click="onJump('/pages/company/order_manage',1)">
				<image src="@/static/public/icon57.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">订单管理</view>

				<image src="@/static/public/arrow_right1.png" mode="aspectFill" class="ico22 ml20"></image>
			</view>

		</view>
		<view class="box">
			<view class="flex-box info_item" @click="onJump('/pages/public/feedback',1)">
				<image src="@/static/public/icon_rec.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">意见反馈</view>

				<image src="@/static/public/arrow_right1.png" mode="aspectFill" class="ico22 ml20"></image>
			</view>
			<view class="flex-box info_item" @click="onJump('/pages/public/help_center',1)">
				<image src="@/static/public/icon_help.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">帮助</view>

				<image src="@/static/public/arrow_right1.png" mode="aspectFill" class="ico22 ml20"></image>
			</view>
			<view class="flex-box info_item" @click="onJump('/pages/company/set',1)">
				<image src="@/static/public/icon_set.png" mode="widthFix" class="info_img"></image>
				<view class="flex-grow-1 plr40 col3 fs30">设置</view>

				<image src="@/static/public/arrow_right1.png" mode="aspectFill" class="ico22 ml20"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import NiceuiProgress from '@/uni_modules/niceui-progress/components/niceui-progress/niceui-progress.vue'
	const app = getApp();
	export default {
		name: "company_profile",
		components: {
			NiceuiProgress
		},
		data() {
			return {
				userinfo: {},
				summary: {
					info_complete: 0
				},
				show: false,
			};
		},

		created() {
			let page = this;
		},
		mounted() {
			let user = this.$core.getUserinfo();
			// if (user && user.group_id == 2) {
			// 	this.refresh();
			// }
			uni.$on(getApp().globalData.Events.UcenterInfoCompleteChange, this.eventOnUcenterInfoCompleteChange, this);
			uni.$on(getApp().globalData.Events.InterviewCommentAdd, this.eventOnInterviewCommentAdd, this);

		},
		beforeDestroy() {
			uni.$off(getApp().globalData.Events.UcenterInfoCompleteChange, this.eventOnUcenterInfoCompleteChange, this);
			uni.$off(getApp().globalData.Events.InterviewCommentAdd, this.eventOnInterviewCommentAdd, this);
		},
		methods: {
			//请求网络刷新界面数据
			refresh: function(showLoading) {
				let component = this;
				this.$core.get({
					url: '/xilujob.company/company',
					loading: showLoading,
					success(ret, data) {
						component.userinfo = ret.data.userinfo
						component.summary = ret.data.summary;
						console.log(component.summary);
						component.show = true
						//app.setUserinfo(ret.data.userinfo);
						//component._createCanvas('one', 60 / 2, '#FF770A', '完成', ret.data.summary.info_complete, 100);
					}
				});
			},
			onJump(url, needLogin) {

				if (needLogin) {
					if (!this.$core.getUserinfo(true)) {
						return true;
					}
				}
				uni.navigateTo({
					url: url
				})
			},
			changeRole() {
				this.$emit("changeRole", {})
			},
			bindChatMessage() {
				uni.navigateTo({
					url: '/pages/public/notice_center'
				})
			},
			eventOnUcenterInfoCompleteChange(complete) {
				this.summary.info_complete = complete;
				this.$nextTick(() => {

					this.$refs.circle2.draw(this.summary.info_complete)
				})
			},
			eventOnInterviewCommentAdd: function(data) {
				this.summary.not_comment_count = data.count;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user_img {
		width: 132rpx;
		height: 132rpx;
		border: 3rpx solid #FFFFFF;
		border-radius: 50%;
	}

	.lh66 {
		line-height: 66rpx;
	}

	.switch_nav {
		width: 165rpx;
		height: 58rpx;
		background: #FFFFFF;
		border-radius: 29rpx;
		font-size: 26rpx;
		color: var(--primary);

		image {
			width: 22rpx;
			height: 22rpx;
		}
	}

	.dot {
		position: relative;

		&::after {
			content: '';
			width: 13rpx;
			height: 13rpx;
			background: #FF5656;
			border: 1px solid #FFFFFF;
			position: absolute;
			border-radius: 50%;
			top: 8rpx;
			right: -6rpx;
		}
	}

	.mid_box {
		width: 690rpx;
		height: 203rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		margin-top: 30rpx;

		.ico {
			width: 56rpx;
			height: 55rpx;
		}
	}

	.box {
		width: 690rpx;

		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		padding: 0 22rpx 0 40rpx;
		margin-top: 20rpx;
	}

	.mt80 {
		margin-top: 80rpx;
	}

	.ico22 {
		width: 22rpx;
		height: 22rpx;
	}

	.box1 {
		width: 690rpx;
		height: 178rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		padding-left: 40rpx;
		padding-right: 20rpx;
		margin-top: 20rpx;

		.ico_comp {
			width: 118rpx;
			height: 118rpx;
		}
	}

	.red_cir {
		position: absolute;
		right: -12rpx;
		top: -12rpx;
		font-size: 20rpx;
		color: #fff;
		min-width: 34rpx;
		height: 34rpx;
		line-height: 34rpx;
		text-align: center;
		padding: 0 5rpx;
		box-sizing: border-box;
		background-color: #FF0000;
		border-radius: 50%
	}

	.part_item {
		font-size: 24rpx;
		color: #333;
		text-align: center;
		padding: 30rpx 0
	}

	.part_item view:nth-child(1) {
		width: 70rpx;
		height: 70rpx;
		display: block;
		margin: 0 auto 15rpx;
		position: relative
	}

	.part_item image {
		width: 100%;
		height: 100%;
		display: block
	}

	.chat_btn image {
		width: 34rpx;
		height: 34rpx;
		display: block
	}

	.chat_btn .red_cir {
		top: 36rpx;
		left: 34rpx;
		right: auto
	}

	.chat_btn {
		padding-top: 36rpx;
	}

	.mine_img {
		width: 81rpx;
		height: 78rpx;
	}

	.mine_img image {
		width: 100%;
		height: 100%;
		display: block
	}

	.info_img {
		width: 35rpx;
		height: 36rpx;
		margin-right: 18rpx;
	}

	.info_item {
		line-height: 115rpx;
		border-bottom: 1rpx solid #F3F3F3
	}

	.info_item:nth-last-child(1) {
		border-bottom: 0;
	}

	.chat_btn {
		position: absolute;
		top: 145rpx;
		right: 30rpx;
	}

	.chat_btn image {
		width: 34rpx;
		height: 34rpx;
		display: block
	}

	.chat_btn .red_cir {
		top: 36rpx;
		left: 34rpx;
		right: auto
	}

	.chat_btn {
		padding-top: 36rpx;
	}
</style>